﻿import * as React from "react";
import R悬浮提示标签 from './悬浮提示标签'
import Obj = require('object-assign')
import * as 悬浮提示标签  from './悬浮提示标签'
import * as 颜色 from '../../工具代码/颜色'
import 数 from '../../工具代码/数'
import R控件基类 from '../../核心代码/R控件基类'
import * as 基类 from '../../核心代码/控件基类'

export default class R图标按钮 extends R控件基类{
    constructor(props) {
        super(props)
        this.基础数据 = this.props as 图标按钮
        this.图标数据 = this.基础数据.图标
        this.悬浮提示标签数据 = this.基础数据.悬浮提示标签

        this.标准样式 = this.基础数据.自定义样式 ? this.基础数据.自定义样式 : Obj({}, this.标准样式,
            {
                display: 'inline-block',
                textAlign: 'center',
                lineHeight: this.基础数据.高度 ? this.基础数据.高度.取值 : '30px',
            })

        this.state = {
            使用样式: this.标准样式,
            是否启用: this.基础数据.是否启用 ? null : this.基础数据.是否启用
        }
        this.禁用样式 = Obj({}, this.state.使用样式, this.样式.取禁用样式)
    }

    事件处理 = Obj({}, this.基本事件, {
        onClick: (e) => {
            e.stopPropagation()
            this.props.单击 ? this.props.单击(e) : {}
        }
    })

    基础数据: 图标按钮 = {}
    图标数据: 图标 = {}
    悬浮提示标签数据: 悬浮提示标签.悬浮提示标签 = {}

    render() {
        if (this.state.是否启用 == null || this.state.是否启用 == true) {
            return (
                <div>
                    <div style={this.state.使用样式}
                        {...this.事件处理}
                        >
                        <R图标 {...this.图标数据}/>
                    </div>
                    <R悬浮提示标签 {...this.悬浮提示标签数据} />
                </div>
            )
        } else {
            return (
                <div>
                    <div style={this.禁用样式} >
                        <R图标 {...this.图标数据} 是否启用={false}/>
                    </div>
                    <R悬浮提示标签  {...this.悬浮提示标签数据}  是否启用={false} />
                </div>
            )
        }
    }
}

export  class R图标 extends R控件基类 {
    constructor(props) {
        super(props)
        this.基础数据 = this.props as 图标
        this.标准样式 = this.基础数据.自定义样式 ? this.基础数据.自定义样式 : Obj({}, this.标准样式,
            {
                display: 'inline',
                fontSize: this.基础数据.图标尺寸.取值,
                width: this.基础数据.宽度 ? this.基础数据.宽度.取值 : '100%',
                height: this.基础数据.高度 ? this.基础数据.高度.取值: '30px',
                lineHeight: this.基础数据.高度 ? this.基础数据.高度.取值 : '30px'
            })
        this.state = {
            使用样式: this.标准样式,
            是否启用: this.基础数据.是否启用 ? null : this.基础数据.是否启用
        }
        this.禁用样式 = Obj({}, this.state.使用样式, this.样式.取禁用样式)
    }
    基础数据: 图标 = {}
    return() {
        if (this.state.是否启用 == null || this.state.是否启用 == true) {
            return (
                <i style={this.state.使用样式}
                    className={`iconfont ${this.基础数据.图标}`}>
                </i>
            )
        } else {
            return (
                <i style={this.禁用样式}
                    className={`iconfont ${this.基础数据.图标}`}>
                </i>
            )
        }
    }
}

export interface 图标 extends 基类.控件基类 {
    图标尺寸?:数
    图标?: string
}

export interface 图标按钮 extends 基类.控件基类 {
    图标?: 图标
    单击?: (e) => void
    按下快捷键?: (e) => void
    悬浮提示标签?: 悬浮提示标签.悬浮提示标签
}
